<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>51Talk之星 中华少年说</title>
    <link type="text/css" rel="stylesheet" href="../static/css/common.min.css">
    <link type="text/css" rel="stylesheet" href="../static/css/ichmap.min.css">
    <script src="../static/js/jquery-1.12.3.min.js"></script>
    <script src="../static/js/flexible.min.js"></script>
    <script src="../static/js/html2canvas.min.js"></script>
    <script src="../static/js/canvas2image.js"></script>
    <!-- <script src="../static/js/ichmap.min.js"></script> -->
    <!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->
</head>

<body>
    <div id="yuko-mask">
        <div id="yuko-mask-sharehand"></div>
        <div id="yuko-mask-iknow"></div>
    </div>
    <div id="yuko-root">
        <div id="yuko-mask-transparent"></div>
        <img id="yuko-root-bg" src="../static/images/ichmap/bg.png" />
        <div class="yuko-station" id="yuko-station-head">
            <img src="../static/images/ichmap/head.png" />
        </div>
        <div id="yuko-station-activenum">16</div>
        <div class="yuko-station" id="yuko-station-01">
            <img src="../static/images/ichmap/inactive/1.png" />
            <img class="active" src="../static/images/ichmap/active/1.png" />
        </div>
        <div class="yuko-station" id="yuko-station-02">
            <img src="../static/images/ichmap/inactive/2.png" />
            <img class="active" src="../static/images/ichmap/active/2.png" />
        </div>
        <div class="yuko-station" id="yuko-station-03">
            <img src="../static/images/ichmap/inactive/3.png" />
            <img class="active" src="../static/images/ichmap/active/3.png" />
        </div>
        <div class="yuko-station" id="yuko-station-04">
            <img src="../static/images/ichmap/inactive/4.png" />
            <img class="active" src="../static/images/ichmap/active/4.png" />
        </div>
        <div class="yuko-station" id="yuko-station-05">
            <img src="../static/images/ichmap/inactive/5.png" />
            <img class="active" src="../static/images/ichmap/active/5.png" />
        </div>
        <div class="yuko-station" id="yuko-station-06">
            <img src="../static/images/ichmap/inactive/6.png" />
            <img class="active" src="../static/images/ichmap/active/6.png" />
        </div>
        <div class="yuko-station" id="yuko-station-07">
            <img src="../static/images/ichmap/inactive/7.png" />
            <img class="active" src="../static/images/ichmap/active/7.png" />
        </div>
        <div class="yuko-station" id="yuko-station-08">
            <img src="../static/images/ichmap/inactive/8.png" />
            <img class="active" src="../static/images/ichmap/active/8.png" />
        </div>
        <div class="yuko-station" id="yuko-station-09">
            <img src="../static/images/ichmap/inactive/9.png" />
            <img class="active" src="../static/images/ichmap/active/9.png" />
        </div>
        <div class="yuko-station" id="yuko-station-10">
            <img src="../static/images/ichmap/inactive/10.png" />
            <img class="active" src="../static/images/ichmap/active/10.png" />
        </div>
        <div class="yuko-station" id="yuko-station-11">
            <img src="../static/images/ichmap/inactive/11.png" />
            <img class="active" src="../static/images/ichmap/active/11.png" />
        </div>
        <div class="yuko-station" id="yuko-station-12">
            <img src="../static/images/ichmap/inactive/12.png" />
            <img class="active" src="../static/images/ichmap/active/12.png" />
        </div>
        <div class="yuko-station" id="yuko-station-13">
            <img src="../static/images/ichmap/inactive/13.png" />
            <img class="active" src="../static/images/ichmap/active/13.png" />
        </div>
        <div class="yuko-station" id="yuko-station-14">
            <img src="../static/images/ichmap/inactive/14.png" />
            <img class="active" src="../static/images/ichmap/active/14.png" />
        </div>
        <div class="yuko-station" id="yuko-station-15">
            <img src="../static/images/ichmap/inactive/15.png" />
            <img class="active" src="../static/images/ichmap/active/15.png" />
        </div>
        <div class="yuko-station" id="yuko-station-16">
            <img src="../static/images/ichmap/inactive/16.png" />
            <img class="active" src="../static/images/ichmap/active/16.png" />
        </div>
        <div id="yuko-question-title">
            书法趣味问答
        </div>
        <div id="yuko-question-content">
            <div id="yuko-question-text">
                书法家千千万
                <br> 为什么王羲之是“书圣”？
            </div>
        </div>
        <div id="yuko-qrcode">
            <img id="yuko-qrcode-img" src="../static/images/ichmap/qrcode.png" />
        </div>
    </div>
    <script>
        $(function () {

            //去掉遮罩，加载保存图片
            $('#yuko-mask-iknow').on('touchend', function () {
                $('#yuko-mask').fadeOut(280,function(){
                    saveImage();
                });
            });
            /**
             * 设置点亮的图标数目
             */
            function setActiveNum(num) {
                $('#yuko-station-activenum').text(num);
            }

            /**
             * 保存图片
             */
            function saveImage() {
                var shareContent = document.body;
                var width = shareContent.offsetWidth; 
                var height = shareContent.offsetHeight; 
                var canvas = document.createElement("canvas"); 
                var scale = 3; 
                canvas.width = width * scale; 
                canvas.height = height * scale; 
                canvas.getContext("2d").scale(scale, scale); 
                var opts = {
                    scale: scale, 
                    canvas: canvas, 
                    width: width, 
                    height: height,
                    allowTaint: true, 
                    taintTest: true, 
                    useCORS: true 
                };
                html2canvas(shareContent, opts).then(function (canvas) {

                    var context = canvas.getContext('2d');
                    context.mozImageSmoothingEnabled = false;
                    context.webkitImageSmoothingEnabled = false;
                    context.msImageSmoothingEnabled = false;
                    context.imageSmoothingEnabled = false;

                    var img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);
                    img.id = 'yuko-screenshot';

                    $(img).css({
                        'width': (canvas.width / scale) + 'px',
                        'height': (canvas.height / scale) + 'px',
                        'position': 'absolute',
                        'top': '0',
                        'left': '0',
                        'z-index': 99
                    });
                    $(document.body).append(img);
                    //alert('图片生成成功');

                });
            }

            /**
             * 分享图片
             */
            //微信朋友圈分享，参考https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
            // wx.config({
            //     debug: false,
            //     appId: '@appId',
            //     timestamp: '@timestamp',
            //     nonceStr: '@noncestr',
            //     signature: '@signature',
            //     jsApiList: ['updateTimelineShareData']
            // });
            // wx.ready(function () {//需在用户可能点击分享按钮前就先调用
            //     wx.updateTimelineShareData({ 
            //         title: '', // 分享标题
            //         link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            //         imgUrl: '', // 分享图标
            //         success: function () {
            //             // 设置成功
            //         }
            //     });
            // });


            // 点亮图标
            $.ajax({
                url: '/',//获取以已点亮的站列表
                type: 'post',
                data: {},//请求所需数据，如用户ID等
                dataType: 'json',
                success: function (data) {
                    console.log(data);//TODO success处理

                    // 假设存在数据 data.activeNum = 5
                    data.activeNum = 5
                    setActiveNum(data.activeNum);//设置点亮的图标数目

                    for (var i = 0; i < data.activeNum; i++) {
                        // 点亮图标
                        $($('.yuko-station')[i]).addClass('active');
                    }
                },
                error: function (data) {
                    console.log(data);
                }
            });

            //动态获取头像
            $.ajax({
                url: '/',
                type: 'post',
                data: {},//请求所需数据，如用户ID等
                dataType: 'json',
                success: function (data) {
                    var imgLink = data.imgLink;//头像图片路径
                    $('#yuko-station-head img').attr('src',imgLink);
                },
                error: function (data) {
                    console.log(data);
                }
            });

        });
    </script>
</body>

</html>